<script setup lang="ts">
import { computed, ref } from 'vue';

import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CopyOutlined,
  DollarOutlined,
  FileTextOutlined,
  PlusOutlined,
  SendOutlined,
  WalletOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

const activeTab = ref('overview');
const createTransactionModal = ref(false);
const signTransactionModal = ref(false);
const selectedTransaction = ref<any>(null);

// 多签钱包配置
const walletConfig = ref({
  address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb6',
  requiredSignatures: 3,
  totalSigners: 5,
  signers: [
    { name: '朱元璋', role: '太祖', address: '0x1234...5678', signed: true },
    { name: '朱棣', role: '成祖', address: '0xabcd...efgh', signed: true },
    { name: '朱高炽', role: '仁宗', address: '0x5678...9abc', signed: false },
    { name: '朱瞻基', role: '宣宗', address: '0xdef0...1234', signed: false },
    { name: '朱祁镇', role: '英宗', address: '0x4567...89ab', signed: false },
  ],
});

// 钱包余额
const walletBalance = ref({
  eth: 123.45,
  usdt: 500_000,
  dai: 200_000,
  totalValueUSD: 890_000,
});

// NFT资产
const nftAssets = ref([
  {
    id: 'nft-1',
    name: '南京祖宅',
    tokenId: 1001,
    image: 'https://via.placeholder.com/200x200?text=Ancestral+Home',
    value: 5_000_000,
  },
  {
    id: 'nft-2',
    name: '明代青花瓷',
    tokenId: 1002,
    image: 'https://via.placeholder.com/200x200?text=Ming+Vase',
    value: 880_000,
  },
  {
    id: 'nft-3',
    name: '祖传玉玺',
    tokenId: 1003,
    image: 'https://via.placeholder.com/200x200?text=Imperial+Seal',
    value: 2_000_000,
  },
]);

// 待签交易列表
const pendingTransactions = ref([
  {
    id: 'tx-1',
    type: 'transfer',
    to: '朱高炽（仁宗）',
    toAddress: '0x5678...9abc',
    amount: 10,
    currency: 'ETH',
    reason: '藩国经费补贴',
    createdBy: '朱元璋',
    createdAt: '2025-10-14 09:30:00',
    deadline: '2025-10-16 09:30:00',
    requiredSigs: 3,
    currentSigs: 2,
    signers: [
      { name: '朱元璋', signed: true, time: '2025-10-14 09:30:00' },
      { name: '朱棣', signed: true, time: '2025-10-14 10:15:00' },
      { name: '朱高炽', signed: false, time: null },
      { name: '朱瞻基', signed: false, time: null },
      { name: '朱祁镇', signed: false, time: null },
    ],
    status: 'pending',
    gasEstimate: 0.005,
  },
  {
    id: 'tx-2',
    type: 'nft',
    to: '朱瞻基（宣宗）',
    toAddress: '0xdef0...1234',
    nftName: '明代青花瓷',
    tokenId: 1002,
    reason: '家族传承',
    createdBy: '朱棣',
    createdAt: '2025-10-14 11:00:00',
    deadline: '2025-10-17 11:00:00',
    requiredSigs: 3,
    currentSigs: 1,
    signers: [
      { name: '朱元璋', signed: false, time: null },
      { name: '朱棣', signed: true, time: '2025-10-14 11:00:00' },
      { name: '朱高炽', signed: false, time: null },
      { name: '朱瞻基', signed: false, time: null },
      { name: '朱祁镇', signed: false, time: null },
    ],
    status: 'pending',
    gasEstimate: 0.008,
  },
  {
    id: 'tx-3',
    type: 'contract',
    contractName: '教育基金支付',
    to: '北京大学',
    toAddress: '0x9876...5432',
    amount: 50,
    currency: 'ETH',
    reason: '2025年度奖学金',
    createdBy: '朱高炽',
    createdAt: '2025-10-13 14:00:00',
    deadline: '2025-10-15 14:00:00',
    requiredSigs: 3,
    currentSigs: 3,
    signers: [
      { name: '朱元璋', signed: true, time: '2025-10-13 14:30:00' },
      { name: '朱棣', signed: true, time: '2025-10-13 15:00:00' },
      { name: '朱高炽', signed: true, time: '2025-10-13 14:00:00' },
      { name: '朱瞻基', signed: false, time: null },
      { name: '朱祁镇', signed: false, time: null },
    ],
    status: 'ready',
    gasEstimate: 0.012,
  },
]);

// 历史交易
const historyTransactions = ref([
  {
    id: 'tx-h-1',
    type: 'transfer',
    to: '朱棣',
    amount: 20,
    currency: 'ETH',
    executedAt: '2025-10-12 16:00:00',
    txHash:
      '0x1a2b3c4d5e6f7890abcdef1234567890abcdef1234567890abcdef1234567890',
    status: 'executed',
  },
  {
    id: 'tx-h-2',
    type: 'nft',
    to: '朱高炽',
    nftName: '祖传古籍',
    tokenId: 2001,
    executedAt: '2025-10-11 10:00:00',
    txHash:
      '0x9876543210fedcba0123456789abcdef0123456789abcdef0123456789abcdef',
    status: 'executed',
  },
]);

// 新建交易表单
const newTransaction = ref({
  type: 'transfer',
  to: '',
  toAddress: '',
  amount: 0,
  currency: 'ETH',
  nftId: '',
  reason: '',
  deadline: null,
});

const pendingColumns = [
  { title: '交易ID', dataIndex: 'id', key: 'id', width: 100 },
  { title: '类型', key: 'type', width: 100 },
  { title: '接收方', dataIndex: 'to', key: 'to', width: 150 },
  { title: '金额/资产', key: 'amount', width: 150 },
  { title: '原因', dataIndex: 'reason', key: 'reason' },
  { title: '签名进度', key: 'progress', width: 150 },
  { title: '状态', key: 'status', width: 100 },
  { title: '操作', key: 'action', width: 150 },
];

const historyColumns = [
  { title: '交易ID', dataIndex: 'id', key: 'id', width: 100 },
  { title: '类型', key: 'type', width: 100 },
  { title: '接收方', dataIndex: 'to', key: 'to', width: 150 },
  { title: '金额/资产', key: 'amount', width: 150 },
  { title: '执行时间', dataIndex: 'executedAt', key: 'executedAt', width: 180 },
  { title: '交易哈希', key: 'txHash', width: 200 },
  { title: '状态', key: 'status', width: 100 },
];

// 统计数据
const stats = computed(() => ({
  pendingCount: pendingTransactions.value.filter((t) => t.status === 'pending')
    .length,
  readyCount: pendingTransactions.value.filter((t) => t.status === 'ready')
    .length,
  totalValue: walletBalance.value.totalValueUSD,
  nftCount: nftAssets.value.length,
}));

function getTypeText(type: string) {
  const types = {
    transfer: '转账',
    nft: 'NFT转移',
    contract: '合约执行',
  };
  return types[type] || type;
}

function getTypeColor(type: string) {
  const colors = {
    transfer: 'blue',
    nft: 'purple',
    contract: 'green',
  };
  return colors[type] || 'default';
}

function getStatusText(status: string) {
  const statuses = {
    pending: '待签名',
    ready: '可执行',
    executed: '已执行',
    expired: '已过期',
  };
  return statuses[status] || status;
}

function getStatusColor(status: string) {
  const colors = {
    pending: 'warning',
    ready: 'success',
    executed: 'default',
    expired: 'error',
  };
  return colors[status] || 'default';
}

function formatAddress(address: string) {
  return `${address.slice(0, 6)}...${address.slice(-4)}`;
}

function copyAddress(address: string) {
  navigator.clipboard.writeText(address);
  message.success('地址已复制到剪贴板');
}

function openSignModal(transaction: any) {
  selectedTransaction.value = transaction;
  signTransactionModal.value = true;
}

function signTransaction() {
  if (!selectedTransaction.value) return;

  const tx = pendingTransactions.value.find(
    (t) => t.id === selectedTransaction.value.id,
  );
  if (tx) {
    tx.currentSigs += 1;
    // 找到当前用户并标记为已签名（这里假设当前用户是朱瞻基）
    const signer = tx.signers.find((s) => s.name === '朱瞻基');
    if (signer) {
      signer.signed = true;
      signer.time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    }

    if (tx.currentSigs >= tx.requiredSigs) {
      tx.status = 'ready';
    }
  }

  message.success('签名成功！当前交易已完成您的签名');
  signTransactionModal.value = false;
  selectedTransaction.value = null;
}

function executeTransaction(transaction: any) {
  message.loading('正在执行交易...', 2).then(() => {
    // 移除待签交易
    const index = pendingTransactions.value.findIndex(
      (t) => t.id === transaction.id,
    );
    if (index !== -1) {
      pendingTransactions.value.splice(index, 1);
    }

    // 添加到历史记录
    historyTransactions.value.unshift({
      id: transaction.id,
      type: transaction.type,
      to: transaction.to,
      amount: transaction.amount,
      currency: transaction.currency,
      nftName: transaction.nftName,
      tokenId: transaction.tokenId,
      executedAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      txHash: `0x${Math.random().toString(16).slice(2)}${Math.random().toString(16).slice(2)}`,
      status: 'executed',
    });

    message.success('交易执行成功！');
  });
}

function createTransaction() {
  if (!newTransaction.value.to || !newTransaction.value.toAddress) {
    message.error('请填写接收方信息');
    return;
  }

  if (
    newTransaction.value.type === 'transfer' &&
    newTransaction.value.amount <= 0
  ) {
    message.error('请填写转账金额');
    return;
  }

  if (newTransaction.value.type === 'nft' && !newTransaction.value.nftId) {
    message.error('请选择NFT资产');
    return;
  }

  const newTx = {
    id: `tx-${Date.now()}`,
    type: newTransaction.value.type,
    to: newTransaction.value.to,
    toAddress: newTransaction.value.toAddress,
    amount: newTransaction.value.amount,
    currency: newTransaction.value.currency,
    nftName:
      newTransaction.value.type === 'nft'
        ? nftAssets.value.find((nft) => nft.id === newTransaction.value.nftId)
            ?.name
        : undefined,
    tokenId:
      newTransaction.value.type === 'nft'
        ? nftAssets.value.find((nft) => nft.id === newTransaction.value.nftId)
            ?.tokenId
        : undefined,
    reason: newTransaction.value.reason,
    createdBy: '朱瞻基（当前用户）',
    createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    deadline:
      newTransaction.value.deadline ||
      dayjs().add(3, 'day').format('YYYY-MM-DD HH:mm:ss'),
    requiredSigs: 3,
    currentSigs: 1,
    signers: walletConfig.value.signers.map((s, index) => ({
      name: s.name,
      signed: index === 3, // 假设当前用户是第4个（朱瞻基）
      time: index === 3 ? dayjs().format('YYYY-MM-DD HH:mm:ss') : null,
    })),
    status: 'pending',
    gasEstimate: 0.005 + Math.random() * 0.01,
  };

  pendingTransactions.value.unshift(newTx);
  message.success('交易创建成功！等待其他签名者确认');
  createTransactionModal.value = false;

  // 重置表单
  newTransaction.value = {
    type: 'transfer',
    to: '',
    toAddress: '',
    amount: 0,
    currency: 'ETH',
    nftId: '',
    reason: '',
    deadline: null,
  };
}
</script>

<template>
  <div class="treasury-page">
    <div class="page-header">
      <h1>
        <WalletOutlined />
        家族多签钱包
      </h1>
      <p>安全透明的多签名资产管理系统</p>
    </div>

    <!-- 钱包概览卡片 -->
    <a-row :gutter="16" style="margin-bottom: 24px">
      <a-col :span="6">
        <a-card class="stat-card">
          <a-statistic
            title="钱包总值"
            prefix="$"
            :value="stats.totalValue"
            :precision="2"
          >
            <template #prefix>
              <DollarOutlined style="color: #52c41a" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <a-statistic title="待签交易" :value="stats.pendingCount" suffix="笔">
            <template #prefix>
              <ClockCircleOutlined style="color: #faad14" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <a-statistic title="可执行交易" :value="stats.readyCount" suffix="笔">
            <template #prefix>
              <CheckCircleOutlined style="color: #52c41a" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <a-statistic title="NFT资产" :value="stats.nftCount" suffix="件">
            <template #prefix>
              <FileTextOutlined style="color: #1890ff" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <!-- 钱包配置信息 -->
    <a-card title="钱包配置" style="margin-bottom: 24px">
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="钱包地址">
          {{ walletConfig.address }}
          <a-button
            type="link"
            size="small"
            @click="copyAddress(walletConfig.address)"
          >
            <CopyOutlined />
            复制
          </a-button>
        </a-descriptions-item>
        <a-descriptions-item label="签名要求">
          {{ walletConfig.requiredSignatures }} /
          {{ walletConfig.totalSigners }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider>签名者列表</a-divider>

      <a-row :gutter="16">
        <a-col
          v-for="signer in walletConfig.signers"
          :key="signer.address"
          :span="4"
        >
          <a-card size="small" class="signer-card">
            <div class="signer-info">
              <a-avatar
                :style="{
                  backgroundColor: signer.signed ? '#52c41a' : '#d9d9d9',
                }"
              >
                {{ signer.name[0] }}
              </a-avatar>
              <div class="signer-name">{{ signer.name }}</div>
              <div class="signer-role">{{ signer.role }}</div>
              <div class="signer-address">
                {{ formatAddress(signer.address) }}
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <!-- 主要内容区域 -->
    <a-tabs v-model:active-key="activeTab">
      <!-- 资产概览 -->
      <a-tab-pane key="overview" tab="资产概览">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card title="代币余额" :bordered="false">
              <a-list :data-source="Object.entries(walletBalance)">
                <template #renderItem="{ item }">
                  <a-list-item v-if="item[0] !== 'totalValueUSD'">
                    <a-list-item-meta>
                      <template #title>
                        {{ item[0].toUpperCase() }}
                      </template>
                      <template #description>
                        {{ item[1].toLocaleString() }}
                        {{ item[0].toUpperCase() }}
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </a-card>
          </a-col>

          <a-col :span="12">
            <a-card title="NFT资产" :bordered="false">
              <a-row :gutter="[16, 16]">
                <a-col v-for="nft in nftAssets" :key="nft.id" :span="8">
                  <a-card hoverable size="small">
                    <img
                      :src="nft.image"
                      alt=""
                      style="width: 100%; border-radius: 8px"
                    />
                    <div style="margin-top: 8px">
                      <div style="font-weight: bold">{{ nft.name }}</div>
                      <div style="font-size: 12px; color: #999">
                        #{{ nft.tokenId }}
                      </div>
                      <div style="font-size: 12px; color: #52c41a">
                        ¥{{ nft.value.toLocaleString() }}
                      </div>
                    </div>
                  </a-card>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
      </a-tab-pane>

      <!-- 待签交易 -->
      <a-tab-pane key="pending" tab="待签交易">
        <div style="margin-bottom: 16px; text-align: right">
          <a-button type="primary" @click="createTransactionModal = true">
            <PlusOutlined />
            创建新交易
          </a-button>
        </div>

        <a-table
          :columns="pendingColumns"
          :data-source="pendingTransactions"
          :pagination="false"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'type'">
              <a-tag :color="getTypeColor(record.type)">
                {{ getTypeText(record.type) }}
              </a-tag>
            </template>

            <template v-if="column.key === 'amount'">
              <span v-if="record.type === 'transfer'">
                {{ record.amount }} {{ record.currency }}
              </span>
              <span v-else-if="record.type === 'nft'">
                {{ record.nftName }} #{{ record.tokenId }}
              </span>
              <span v-else>
                {{ record.contractName }}
              </span>
            </template>

            <template v-if="column.key === 'progress'">
              <a-progress
                :percent="(record.currentSigs / record.requiredSigs) * 100"
                :show-info="false"
              />
              <span style="font-size: 12px">
                {{ record.currentSigs }} / {{ record.requiredSigs }}
              </span>
            </template>

            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>

            <template v-if="column.key === 'action'">
              <a-space>
                <a-button
                  v-if="record.status === 'pending'"
                  type="primary"
                  size="small"
                  @click="openSignModal(record)"
                >
                  签名
                </a-button>
                <a-button
                  v-if="record.status === 'ready'"
                  type="primary"
                  size="small"
                  @click="executeTransaction(record)"
                >
                  <SendOutlined />
                  执行
                </a-button>
                <a-button size="small" @click="openSignModal(record)">
                  详情
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-tab-pane>

      <!-- 历史记录 -->
      <a-tab-pane key="history" tab="历史记录">
        <a-table
          :columns="historyColumns"
          :data-source="historyTransactions"
          :pagination="{ pageSize: 10 }"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'type'">
              <a-tag :color="getTypeColor(record.type)">
                {{ getTypeText(record.type) }}
              </a-tag>
            </template>

            <template v-if="column.key === 'amount'">
              <span v-if="record.type === 'transfer'">
                {{ record.amount }} {{ record.currency }}
              </span>
              <span v-else> {{ record.nftName }} #{{ record.tokenId }} </span>
            </template>

            <template v-if="column.key === 'txHash'">
              <a-typography-text
                :copyable="{ text: record.txHash }"
                style="font-size: 12px"
              >
                {{ formatAddress(record.txHash) }}
              </a-typography-text>
            </template>

            <template v-if="column.key === 'status'">
              <a-tag color="success">
                <CheckCircleOutlined />
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>

    <!-- 创建交易Modal -->
    <a-modal
      v-model:open="createTransactionModal"
      title="创建新交易"
      width="600px"
      @ok="createTransaction"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="交易类型">
          <a-select v-model:value="newTransaction.type">
            <a-select-option value="transfer">代币转账</a-select-option>
            <a-select-option value="nft">NFT转移</a-select-option>
            <a-select-option value="contract">合约执行</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="接收方名称">
          <a-input
            v-model:value="newTransaction.to"
            placeholder="请输入接收方名称"
          />
        </a-form-item>

        <a-form-item label="接收方地址">
          <a-input
            v-model:value="newTransaction.toAddress"
            placeholder="0x..."
          />
        </a-form-item>

        <a-form-item v-if="newTransaction.type === 'transfer'" label="转账金额">
          <a-input-group compact>
            <a-input-number
              v-model:value="newTransaction.amount"
              style="width: 70%"
              :min="0"
              :precision="4"
            />
            <a-select
              v-model:value="newTransaction.currency"
              style="width: 30%"
            >
              <a-select-option value="ETH">ETH</a-select-option>
              <a-select-option value="USDT">USDT</a-select-option>
              <a-select-option value="DAI">DAI</a-select-option>
            </a-select>
          </a-input-group>
        </a-form-item>

        <a-form-item v-if="newTransaction.type === 'nft'" label="选择NFT">
          <a-select v-model:value="newTransaction.nftId" placeholder="选择NFT">
            <a-select-option
              v-for="nft in nftAssets"
              :key="nft.id"
              :value="nft.id"
            >
              {{ nft.name }} #{{ nft.tokenId }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="交易原因">
          <a-textarea
            v-model:value="newTransaction.reason"
            :rows="3"
            placeholder="请说明交易原因"
          />
        </a-form-item>

        <a-form-item label="签名截止时间">
          <a-date-picker
            v-model:value="newTransaction.deadline"
            show-time
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 签名交易Modal -->
    <a-modal
      v-model:open="signTransactionModal"
      title="签名交易"
      width="700px"
      @ok="signTransaction"
    >
      <div v-if="selectedTransaction">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="交易ID">
            {{ selectedTransaction.id }}
          </a-descriptions-item>
          <a-descriptions-item label="交易类型">
            <a-tag :color="getTypeColor(selectedTransaction.type)">
              {{ getTypeText(selectedTransaction.type) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="接收方">
            {{ selectedTransaction.to }}
          </a-descriptions-item>
          <a-descriptions-item label="接收地址">
            {{ selectedTransaction.toAddress }}
          </a-descriptions-item>
          <a-descriptions-item label="金额/资产" :span="2">
            <span v-if="selectedTransaction.type === 'transfer'">
              <strong>{{ selectedTransaction.amount }}</strong>
              {{ selectedTransaction.currency }}
            </span>
            <span v-else-if="selectedTransaction.type === 'nft'">
              {{ selectedTransaction.nftName }} #{{
                selectedTransaction.tokenId
              }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="交易原因" :span="2">
            {{ selectedTransaction.reason }}
          </a-descriptions-item>
          <a-descriptions-item label="创建者">
            {{ selectedTransaction.createdBy }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
            {{ selectedTransaction.createdAt }}
          </a-descriptions-item>
          <a-descriptions-item label="预估Gas">
            {{ selectedTransaction.gasEstimate }} ETH
          </a-descriptions-item>
          <a-descriptions-item label="签名进度">
            {{ selectedTransaction.currentSigs }} /
            {{ selectedTransaction.requiredSigs }}
          </a-descriptions-item>
        </a-descriptions>

        <a-divider>签名记录</a-divider>

        <a-timeline>
          <a-timeline-item
            v-for="signer in selectedTransaction.signers"
            :key="signer.name"
            :color="signer.signed ? 'green' : 'gray'"
          >
            <template #dot>
              <CheckCircleOutlined
                v-if="signer.signed"
                style="font-size: 16px"
              />
              <ClockCircleOutlined v-else style="font-size: 16px" />
            </template>
            <div>
              <strong>{{ signer.name }}</strong>
              <span
                v-if="signer.signed"
                style="margin-left: 8px; color: #52c41a"
              >
                已签名
              </span>
              <span v-else style="margin-left: 8px; color: #999"> 待签名 </span>
            </div>
            <div v-if="signer.time" style="font-size: 12px; color: #999">
              {{ signer.time }}
            </div>
          </a-timeline-item>
        </a-timeline>

        <a-alert
          v-if="selectedTransaction.status === 'pending'"
          message="签名确认"
          description="请仔细核对交易信息，确认无误后点击【确定】进行签名。签名后不可撤销。"
          type="warning"
          show-icon
          style="margin-top: 16px"
        />

        <a-alert
          v-if="selectedTransaction.status === 'ready'"
          message="交易已就绪"
          description="该交易已获得足够签名，可以执行。"
          type="success"
          show-icon
          style="margin-top: 16px"
        />
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.treasury-page {
  padding: 24px;

  .page-header {
    margin-bottom: 24px;

    h1 {
      margin-bottom: 8px;
      font-size: 28px;
      font-weight: bold;
    }

    p {
      font-size: 14px;
      color: #666;
    }
  }

  .stat-card {
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 16px rgb(0 0 0 / 10%);
      transform: translateY(-4px);
    }
  }

  .signer-card {
    text-align: center;

    .signer-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;

      .signer-name {
        margin-top: 8px;
        font-weight: bold;
      }

      .signer-role {
        font-size: 12px;
        color: #999;
      }

      .signer-address {
        font-size: 10px;
        color: #ccc;
      }
    }
  }
}
</style>
